<template>
  <div class="goods_list" v-loading="loading" style="margin-top: 10px">
    <el-form class="boss-form" inline ref="form" label-width="80px">
      <el-form-item label="时间：">
        <el-date-picker
          v-model="goodsData.time"
          type="daterange"
          unlink-panels
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder="起始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearchClick">搜索</el-button>
        <el-button @click="onResetClick">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="outerTable">
      <div style="display: flex">
        <el-upload :show-file-list="false" :data="{ goodsId: goodsData.goodsId }"
                   :on-error="handleAvatarError" :on-success="handleShowSuccess"
                   :before-upload="beforeShowUpload" :action=actionShowUrl>
          <template #trigger>
            <el-button type="primary" style="margin-right: 20px">导入</el-button>
          </template>
        </el-upload>
        <el-button :disabled="showSearchBtn" type="primary" @click="onDelectClick" style="margin-right: 20px">
          删除搜索
        </el-button>
      </div>
      <el-table ref="tableRef" :data="goodsData.list" :height="tableHeight">
        <el-table-column fixed="left" type="index" width="50" />
        <el-table-column prop="udicode" label="udicode" />
        <el-table-column prop="createTime" label="创建时间">
          <template #default="{row}">
            {{ row.createTime }}
          </template>
        </el-table-column>
        <el-table-column prop="batchNumber" label="批次号" />
        <el-table-column prop="productionDate" label="生产日期" />
        <el-table-column prop="expiryDate" label="有效日期" />
        <el-table-column prop="originCode" label="母码" />
        <el-table-column prop="childCode" label="子码" />
        <el-table-column prop="antiFakeCode" label="防伪码" />
      </el-table>
      <Pager :page="goodsData.search.page" :pageSizes="goodsData.pageSizes" :total="goodsData.total"
             :limit="goodsData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { calcTableHeight } from '@/utils/table'
import api from '@/api'
import { formatTime } from '@/utils/formater'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import { apiBasePath } from '@/api/config'

const actionShowUrl = apiBasePath + '/ruikeli/antiFake/importExcel/importProduct'
const { tableRef, tableHeight } = calcTableHeight()
const route = useRoute()
const loading = ref(false)
const showSearchBtn = ref(true)
const goodsData = reactive({
  goodsId: route.params.id,
  time: '',
  list: [],
  total: 0,
  pageSizes: [10, 30, 50],
  search: {
    page: 1,
    limit: 10,
    createTimeBegin: '',
    createTimeEnd: ''
  }
})

const handleAvatarError = () => {
  loading.value = false
}

const beforeShowUpload = (file) => {
  const isXLSXorXLS = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel'
  if (!isXLSXorXLS) {
    ElMessage.error('只能上传.xlsx和.xls格式的文件!')
  }
  return isXLSXorXLS
}
const onSearchClick = () => {
  loadData()
}
const onResetClick = () => {
  goodsData.search.page = 1
  goodsData.search.limit = 10
  goodsData.search.createTimeBegin = ''
  goodsData.search.createTimeEnd = ''
  goodsData.time = ''
  showSearchBtn.value = true
  loadData()
}
const handleShowSuccess = async () => {
  ElMessage.success(`上传成功`)
  await loadData()
}
const onDelectClick = async () => {
  const url = `/ruikeli/antiFake/product/delProductList?goodsId=${route.params.id}&createTimeBegin=${goodsData.search.createTimeBegin}&createTimeEnd=${goodsData.search.createTimeEnd}`
  const { err, data } = await api.post(url)
  if (err) {
    ElMessage.error(err)
  } else {
    await loadData()
    ElMessage.success(`删除成功`)
  }
}
const loadData = async () => {
  loading.value = true
  const url = `/ruikeli/antiFake/product/list`
  if (goodsData.time) {
    goodsData.search.createTimeBegin = goodsData.time[0]
    goodsData.search.createTimeEnd = goodsData.time[1]
  }
  const params = {
    goodsId: goodsData.goodsId,
    page: goodsData.search.page,
    limit: goodsData.search.limit,
    createTimeBegin: goodsData.search.createTimeBegin,
    createTimeEnd: goodsData.search.createTimeEnd
  }
  const { data, err } = await api.get(url, params)
  if (err) {
    ElMessage.error(err)
  } else {
    goodsData.total = data.count
    goodsData.list = data.list
  }
  loading.value = false
  if (goodsData.time) {
    showSearchBtn.value = false
  }
}
const onCurrentChange = (val) => {
  goodsData.search.page = val
  loadData()
}
const onSizeChange = (val) => {
  goodsData.search.limit = val
  loadData()
}


onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.goods-edit {
  .goods-content {
    margin: 0 15px 0 10px;

    .uploadImg {
      display: flex;
      align-items: flex-end;
      font-size: 12px;

      .icon-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          line-height: 14px;
          text-align: center;
          padding: 0 30px;
          margin-top: 8px;
          color: var(--color-text);
        }
      }

      .tips {
        .img-tip {
          color: var(--span-title-text);
          margin-left: 12px;
        }
      }
    }

    .boss_input,
    :deep(.el-cascader) {
      width: 750px;
    }

    :deep(.el-cascader) {
      .el-input {
        height: 40px;
      }
    }

    .goods_img {
      .el-upload--picture-card {
        width: 146px;
        height: 146px;
      }

      .el-upload-list {
        flex-wrap: nowrap !important;
      }
    }

    .goods_info,
    .goods_introduce,
    .goods_detail,
    .goods_license,
    .product_operation {
      background-color: var(--background);
      margin: 10px 0;
      padding: 20px;

      .title {
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 20px;
      }
    }

    .goods_info {
      .goods_select,
      .expand {
        width: 750px;
      }

      .expand {
        display: flex;
        flex-direction: column;

        .expand-box {
          display: flex;

          .tag-label {
            position: relative;
            width: 36px;
            color: var(--span-title-text);
            font-weight: 500;
            padding-right: 8px;
          }

          .tag-label::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            left: 44px;
            top: 12px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #919398;
          }

          .tags {
            margin-left: 18px;
            flex: 1;
          }
        }
      }
    }

    .goods_introduce,
    .goods_info {
      .items {
        display: flex;

        ._left,
        ._right {
          display: flex;
          flex-direction: column;

          .boss_input {
            width: 309px;
          }
        }

        ._right {
          margin-left: 20px;
        }
      }
    }

    .goods_introduce {
      .info {
        .product {
          display: flex;
          flex-direction: column;

          .uploadImg {
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}

.goods_license {

  .type {
    .type-box {
      border: 1px solid var(--input-border-color);
      margin-bottom: 20px;
      border-radius: 4px;
    }

    .checkBox-small {
      display: flex;
      align-items: center;
      background-color: #fafafa;
      height: 48px;
      line-height: 16px;
      padding-left: 20px;
      border-radius: 4px;
    }

    .checkBox-large {
      .qulification {
        color: var(--color-text);
        padding-left: 10px;

        .el-form-item {
          margin: 0;
        }

        .item {
          margin: 20px 0;

          .upload-img {
            display: flex;
            align-items: flex-end;

            .tips {
              display: flex;
              align-items: center;

              .btn {
                margin-left: 10px;
              }

              .img-tip {
                font-size: 12px;
                color: var(--span-color-text);
                height: 16px;
                line-height: 16px;
                margin-left: 12px;
              }
            }

            .noImg {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 80px;
              height: 80px;

              .el-icon svg {
                width: 25px;
                height: 25px;
                margin-bottom: 10px;
              }

              .tip {
                font-size: 12px;
                line-height: 12px;
                padding: 0 5px;
                text-align: center;
              }
            }
          }
        }

        .time {
          margin-bottom: 30px;

          .time-icon {
            font-size: 8px;
            margin: 0 11px;
            color: var(--span-color-text);
          }
        }
      }
    }
  }
}

.el-icon.avatar-uploader-icon {
  height: auto;
}

.disabledImg {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>

<style scoped>
.goods_info .expand .el-form-item .el-form-item__content {
  margin-left: 0 !important;
}

.goods_info .el-radio__input {
  display: none;
}

.goods_info .el-radio__label {
  padding-left: 0;
  line-height: 18px;
}

.goods_info .el-radio.is-bordered {
  padding: 10px;
  height: 40px;
  margin: 0 10px 10px 0;
}

.tags .el-radio {
  position: relative;
}

.tags .el-radio.active .el-radio__label::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 10px solid #0486fe;
  border-left-color: transparent;
  border-top-color: transparent;
}

.tags .el-radio.active .el-radio__label::before {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 2px;
  height: 4px;
  border: 1px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  z-index: 1;
}

.avatar-uploader .avatar {
  width: 146px;
  height: 146px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  text-align: center;
}
</style>
